{% extends "base.html" %}

{% block title %}智能工厂管理系统 - 主页{% endblock %}

{% block styles %}
{{ super() }}
<link rel="stylesheet" href="{{ url_for('static', filename='css/index.css') }}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
{% endblock %}

{% block content %}
<div class="dashboard-container">
    <!-- 顶部导航栏 -->
    <header class="main-header">
        <div class="logo">
            <img src="{{ url_for('static', filename='images/logo.png') }}" alt="系统Logo">
            <span>智能工厂管理系统</span>
        </div>
        <div class="user-info">
            <span>{{ current_user.username }}</span>
            <i class="fas fa-chevron-down"></i>
            <div class="user-dropdown">
                <a href="/profile"><i class="fas fa-user-cog"></i>个人设置</a>
                <a href="/logout"><i class="fas fa-sign-out-alt"></i>退出登录</a>
            </div>
        </div>
    </header>

    <!-- 主要内容区 -->
    <div class="main-content">
        <!-- 左侧菜单 -->
        <nav class="side-menu">
            <div class="menu-item">
                <a href="/dashboard" class="active">
                    <i class="fas fa-home"></i>
                    <span>总览</span>
                </a>
            </div>
            <div class="menu-item">
                <a href="/production">
                    <i class="fas fa-industry"></i>
                    <span>生产管理</span>
                </a>
            </div>
            <div class="menu-item">
                <a href="/equipment">
                    <i class="fas fa-tools"></i>
                    <span>设备管理</span>
                </a>
            </div>
            <div class="menu-item">
                <a href="/quality">
                    <i class="fas fa-check-circle"></i>
                    <span>质量管理</span>
                </a>
            </div>
            <div class="menu-item">
                <a href="/warehouse">
                    <i class="fas fa-warehouse"></i>
                    <span>仓储物流</span>
                </a>
            </div>
            <div class="menu-item">
                <a href="/reports">
                    <i class="fas fa-chart-bar"></i>
                    <span>统计报表</span>
                </a>
            </div>
        </nav>

        <!-- 右侧内容区 -->
        <div class="content-wrapper">
            <!-- 数据概览卡片 -->
            <div class="stats-grid">
                <div class="stat-card primary">
                    <div class="stat-icon">
                        <i class="fas fa-industry"></i>
                    </div>
                    <div class="stat-info">
                        <h3>生产进度</h3>
                        <p class="stat-value">85%</p>
                        <p class="stat-desc">较昨日 <span class="up">↑2.3%</span></p>
                    </div>
                </div>
                <div class="stat-card success">
                    <div class="stat-icon">
                        <i class="fas fa-check-circle"></i>
                    </div>
                    <div class="stat-info">
                        <h3>良品率</h3>
                        <p class="stat-value">98.5%</p>
                        <p class="stat-desc">较昨日 <span class="up">↑0.5%</span></p>
                    </div>
                </div>
                <div class="stat-card warning">
                    <div class="stat-icon">
                        <i class="fas fa-cog"></i>
                    </div>
                    <div class="stat-info">
                        <h3>设备利用率</h3>
                        <p class="stat-value">78.3%</p>
                        <p class="stat-desc">较昨日 <span class="down">↓1.2%</span></p>
                    </div>
                </div>
                <div class="stat-card info">
                    <div class="stat-icon">
                        <i class="fas fa-clock"></i>
                    </div>
                    <div class="stat-info">
                        <h3>运行时间</h3>
                        <p class="stat-value">186h</p>
                        <p class="stat-desc">连续运行</p>
                    </div>
                </div>
            </div>

            <!-- 图表区域 -->
            <div class="charts-section">
                <div class="chart-container">
                    <div class="chart-header">
                        <h3>生产趋势</h3>
                        <div class="chart-actions">
                            <button class="btn-chart active">日</button>
                            <button class="btn-chart">周</button>
                            <button class="btn-chart">月</button>
                        </div>
                    </div>
                    <div id="productionChart" class="chart"></div>
                </div>
                
                <div class="chart-container">
                    <div class="chart-header">
                        <h3>设备状态分布</h3>
                        <div class="chart-actions">
                            <button class="btn-refresh"><i class="fas fa-sync-alt"></i></button>
                        </div>
                    </div>
                    <div id="equipmentChart" class="chart"></div>
                </div>
            </div>

            <!-- 实时监控面板 -->
            <div class="monitor-panel">
                <h3>实时监控</h3>
                <div class="monitor-grid">
                    <div class="monitor-item">
                        <div class="monitor-header">
                            <span>生产线 #1</span>
                            <span class="status running">运行中</span>
                        </div>
                        <div class="monitor-body">
                            <div class="monitor-stat">
                                <span>产量</span>
                                <span>1,234</span>
                            </div>
                            <div class="monitor-stat">
                                <span>速率</span>
                                <span>123/h</span>
                            </div>
                            <div class="monitor-stat">
                                <span>温度</span>
                                <span>25°C</span>
                            </div>
                        </div>
                    </div>
                    <!-- 更多监控项... -->
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block js %}
{{ super() }}
<script src="{{ url_for('static', filename='js/index.js') }}"></script>
{% endblock %} 